<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>기본 네비(메뉴) 예제</title>
<link rel="stylesheet" href="../css/JinReset.css" /><!-- css 초기화 -->
<link rel="stylesheet" href="css/layout.css" />
<!-- JS 불러오기 -->
<script src="js/jquery-1.9.1.js"></script>
<script src="../js/topBtn.js"></script>
<style>
	#container{clear:both;position:relative;width:100%;height:300px;background-color:#FF9900}
</style>
</head>
<body>
<div id="wrap">
	<a class="link" href="index.html">목록으로</a>
  <a id="btn_bottom" class="link" href="#bottom">아래로</a>
  <nav id="nav1">
    <h1>네비유형 1 - 글자색 변경</h1>
    <ul class="main_menu">
      <li id="m_menu1"><a href="#">MENU 1</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
          <li><a href="#">서브메뉴 4</a></li>
        </ul>
      </li>
      <li id="m_menu2"><a href="#">MENU 2</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
        </ul>
      </li>
      <li id="m_menu3"><a href="#">MENU 3</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu4"><a href="#">MENU 4</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu5" class="on"><a href="#">MENU 5</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li class="on"><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <nav id="nav2">
    <h1>네비유형 2 - 배경색 변경</h1>
    <ul class="main_menu">
      <li id="m_menu1" class="on"><a href="#">MENU 1</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li class="on"><a href="#">서브메뉴 3</a></li>
          <li><a href="#">서브메뉴 4</a></li>
        </ul>
      </li>
      <li id="m_menu2"><a href="#">MENU 2</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
        </ul>
      </li>
      <li id="m_menu3"><a href="#">MENU 3</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu4"><a href="#">MENU 4</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu5"><a href="#">MENU 5</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <nav id="nav3">
    <h1>네비유형 3 - 배경 이미지 변경</h1>
    <ul class="main_menu">
      <li id="m_menu1"><a href="#">MENU 1</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu2"><a href="#">MENU 2</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
        </ul>
      </li>
      <li id="m_menu3" class="on"><a href="#">MENU 3</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li class="on"><a href="#">서브메뉴 3</a></li>
          <li><a href="#">서브메뉴 4</a></li>
        </ul>
      </li>
      <li id="m_menu4"><a href="#">MENU 4</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu5"><a href="#">MENU 5</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <nav id="nav4">
    <h1>네비유형 4 - 서브 세로</h1>
    <ul class="main_menu">
      <li id="m_menu1"><a href="#">MENU 1</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu2" class="on"><a href="#">MENU 2</a>
        <ul class="sub_menu">
          <li class="on"><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
        </ul>
      </li>
      <li id="m_menu3"><a href="#">MENU 3</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
          <li><a href="#">서브메뉴 4</a></li>
        </ul>
      </li>
      <li id="m_menu4"><a href="#">MENU 4</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
        </ul>
      </li>
      <li id="m_menu5"><a href="#">MENU 5</a>
        <ul class="sub_menu">
          <li><a href="#">서브메뉴 1</a></li>
          <li><a href="#">서브메뉴 2</a></li>
          <li><a href="#">서브메뉴 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div id="container">컨텐츠 영역</div>
	<a class="link" href="index.html">목록으로</a>
  <a id="btn_top" class="link" href="#top">맨위로</a>
</div>
</body>
</html>
